<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>歌手</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <link href="../static/css/mypage.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link href="/css/mypage.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .row{
            width: 80%;
            margin-left: 10%;
            margin-top: 10px;
        }
        .thumbnail:hover{
            transform: scale(1.03);
            transition: all .3s;
        }
        .page{
            text-align: center;
        }
    </style>
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<section class="py-6 text-center container" style="background-image: url(/img/background_2.jpg);width: 100%;height:300px;margin-top: 10px">
    <div class="row py-lg-5">
        <div class="col-lg-12 col-md-8 mx-auto">
            <h1 class="fw-light">花火音乐</h1>
            <p class="lead text-muted">以纯净之声，交世界之友</p>
            <p class="lead text-muted">以空明之心，聆听宇宙的声音</p>
        </div>
        <div class="col-lg-12">
            <div style="width: 40%;height: 45px;border-radius: 80px;margin-left: 30%;margin-top: 10px">
                <div class="input-group">
                    <input type="text" class="form-control" id="singer" placeholder="输入歌手名">
                    <span class="input-group-btn">
                        <button class="btn btn-default" onclick="singerSearch()" type="button">搜索</button>
                    </span>
                </div><!-- /input-group -->
            </div>

        </div><!-- /.col-lg-6 -->
    </div>
</section>
<div id="singerParent">
    <div class="row" id="singerContent">
        <div class="col-xs-6 col-md-3" th:each="singer:${Music.list}">
            <a th:href="'/singerShow/'+${singer.singer_name}" class="thumbnail">
                <img th:src="${singer.singer_photourl}" alt="...">
                <span th:text="${singer.singer_name}"></span>
            </a>
        </div>
    </div>
</div>

<div class="page" id="Page">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" th:href="'/musicsinger/?pageNum='+${Music.pageNum-1}" th:unless="${Music.isFirstPage}">上一页</a></li>
            <th:block th:each="i :${#numbers.sequence(1, Music.pages)}">
                <li class="page-item"><a class="page-link" th:href="'/musicsinger/?pageNum='+${i}" th:text="${i}">1</a></li>
            </th:block>
            <li class="page-item"><a class="page-link" th:href="'/musicsinger/?pageNum='+${Music.pageNum+1}" th:unless="${Music.isLastPage}">下一页</a></li>
        </ul>
    </nav>
</div>
<script>
    function singerSearch() {
        var singerName = $('#singer').val();
        if (singerName == undefined || singerName == ""){
            alert("请输入查询条件")
        } else {
            var Singer = {
                "singer_name":singerName
            };
            $.ajax({
                type:"post",
                url:BaseURL+"singerSearch",
                dataType:"json",
                data:JSON.stringify(Singer),
                contentType : 'application/json',
                success:function (data){
                    console.log(data);
                    var SingerList = data.data;
                    $('#Page').remove();
                    $('#singerContent').remove();
                    var singerContent = '<div class="row" id="singerContent"></div>';
                    $('#singerParent').append(singerContent);
                    for (var i=0;i<SingerList.length;i++){
                        var div =  ' <div class="col-xs-6 col-md-3">\n' +
                                  '     <a href="/singerShow/'+SingerList[i]["singer_name"]+'" class="thumbnail">\n' +
                                  '         <img src="'+SingerList[i]["singer_photourl"]+'" alt="...">\n' +
                                  '         <span >'+SingerList[i]["singer_name"]+'</span>\n' +
                                  '     </a>\n' +
                                  ' </div>';
                        $('#singerContent').append(div)
                    }
                }
            })


        }
    }
</script>
</body>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</html>